<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>捕获/冒泡</title>
        <style type="text/css">
            * { border: 1px solid transparent ; margin: 25px ; }
            html { border-color: gray ; } 
            body { border-color: red ; }
            div { border-color: blue ; height: 100px ; }
        </style>
    </head>
    <body>

        <div></div>

        <script type="text/javascript">
            const body = document.body ;
            const div = document.querySelector( 'div' );

            const type = 'click' ;

            const listener = function(e){
                let t = e.target ; // 获得事件目标
                console.log( e.eventPhase , t , this );
            }

            div.addEventListener( type , listener ,  true );
            body.addEventListener( type , listener ,  true );

            div.addEventListener( type , listener ,  false );
            body.addEventListener( type , listener ,  false );
        </script>
        
    </body>
</html>